<template>
	<view class="container">
    <scroll-view scroll-y class="left-class" @scrolltolower="toNextPage">
      <view class="class-citems">
        <view v-for="item in goodsList" :key="item.integralGoodsId" class="class-citem-item" @click="onViewGoods(item)">
          <image class="class-citem-img" :src="item.thumb" mode="scaleToFill"></image>
          <view class="class-citem-title">{{ item.goodsName }}</view>
          <view class="class-citem-price">{{ item.integral }}积分</view>
          <view class="class-citem-number">{{ item.number }}件可兑换</view>
        </view>
      </view> 
    </scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
        page: 1,
        isEnd: false,
        goodsList: [],
			}
		},
    onLoad() {
      this.getGoods()
    },
		methods: {
      getGoods() {
        this.$http({
          url: '/index/getIntegralGoodsList',
          data: {
            page: this.page
          }
        }).then(res => {
          this.goodsList = this.goodsList.concat(res.data.integralGoodsList)
          this.isEnd = res.data.isEnd
        })
      },
      onViewGoods(item) {
        console.log('item', item)
        uni.navigateTo({
          url: `./detail?id=${item.integralGoodsId}`
        })
      },
      toNextPage() {
        if (this.isEnd != 1) {
          this.page ++
          this.getGoods()
        }
      },
      
		}
	}
</script>

<style lang="less">
	.container {
    height: 100vh;
    width: 100vw;
    display: flex;
    background-color: #fff;
	}
  .left-class{
    width: 100vw;
    height: 100%;
    background-color: #F3F3F3;
    box-sizing: border-box;
    padding: 10rpx 30rpx;
    .class-citems{
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
    }
    .class-citem-item{
      width: 48%;
      margin-bottom: 30rpx;
      background: #fff;
      border-radius: 10rpx;
      padding-bottom: 16rpx;
    }
    .class-citem-img{
      display: block;
      margin: 0 auto;
      width: 100%;
      height: 300rpx;
      object-fit: cover;
      margin-bottom: 12rpx;
    }
    .class-citem-title{
      display: block;
      font-size: 30rpx;
      color: #333;
      line-height: 44rpx;
      margin-top: 12rpx;
      white-space: nowrap;
      width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      padding: 0 12rpx;
    }
    .class-citem-price{
      display: block;
      font-size: 30rpx;
      color: #d4380d;
      line-height: 44rpx;
      padding: 0 12rpx;
    }
    .class-citem-number{
      font-size: 26rpx;
      line-height: 44rpx;
      color: #888;
      padding: 0 12rpx;
    }
  }
</style>
